<template>
    <div id="ClearHB">
        <ul class="mui-table-view">
				<li class="mui-table-view-cell mui-media" v-for="item in msg">
					<router-link class="mui-navigate-right" v-bind="{to:'/news/newslist/' + item.id }">
						<img class="mui-media-object mui-pull-left" :src="item.img_url">
						<div class="mui-media-body">
							{{item.title}}
							<p class='mui-ellipsis'>{{item.zhaiyao}}</p>
						</div>
                        <div class="self">
                            发表日期:{{item.add_time | filDate }} &nbsp;&nbsp; 点击量:{{item.click}}
                        </div>
					</router-link>
				</li>
			</ul>
    </div>    
</template>

<script>
// 导入提示插件
export default {
    data: function() {	
        return {
            msg:''
        }
    },
    methods: {
        getMessage:function () {
            const url = this.$myurl.url ;
            this.$http.get( url + '/api/getnewslist').then(res=>{
                if( res.body.status != 0 ) {
                    this.$toast('网络异常')
                    return ;
                }
                this.msg = res.body.message 
            })
        }
    },
    created(){
        this.getMessage();
    }
}
</script>

<style scoped>
    .mui-navigate-right > .self {
        color:blue;
        font-size: 12px;
        margin-top: 10px;
    }
    .mui-table-view .mui-media-object {
        max-width: 80px; 
        height: 80px;
        width: 80px;
    }
    .mui-navigate-right:after, .mui-push-right:after{
        content: "";
    }
    
</style>